<template>
  <div class="image-carousel">
    <div class="carousel-container">
      <img :src="images[currentImageIndex]" :alt="'Image ' + (currentImageIndex + 1)" @click="nextImage" class="carousel-image"/>
    </div>
    <div class="carousel-controls">
      <button @click="prevImage()" :disabled="currentImageIndex === 0">上一张</button>
      <button @click="nextImage()" :disabled="currentImageIndex === images.length - 1">下一张</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImageCarousel",
  data() {
      return {
        images: [
          'path/to/image1.jpg',
          'path/to/image2.jpg',
          'path/to/image3.jpg',
          // 添加更多图片路径
        ],
        currentImageIndex: 0,
        intervalId: null,
      };
    },
    methods: {
      prevImage(event) {
        event.stopPropagation(); // 阻止事件冒泡
        this.currentImageIndex = (this.currentImageIndex - 1 + this.images.length) % this.images.length;
      },
      nextImage(event) {
        event.stopPropagation(); // 阻止事件冒泡
        this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
      },
      startCarousel() {
        this.intervalId = setInterval(this.nextImage, 3000); // 每3秒切换图片
      },
      stopCarousel() {
        clearInterval(this.intervalId);
      },
    },
    mounted() {
      this.startCarousel();
    },
    beforeDestroy() {
      this.stopCarousel();
    },
  };
</script>

<style scoped>
.image-carousel {
  position: relative;
  width: 100%;
  max-width: 600px; /* 或者你想要的宽度 */
  margin: 0 auto;
}

.carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 保持16:9的宽高比 */
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.carousel-controls {
  text-align: center;
  margin-top: 10px;
}

.carousel-controls button {
  margin: 0 5px;
}
</style>
